<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>cutpic</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		
		<style>
			h5 {
				margin: 5px 7px;
			}
			.mui-input-row .mui-btn {
			    line-height: 1.1;
			    float: right;
			    width:65%;
			    padding: 10px 15px;
			}
		</style>
	</head>
	<link href="../../css/cropper.min.css" rel="stylesheet" />
	
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选取图片</h1>
			
			<button type="button" id="butSaveCut" class="mui-btn mui-btn-link  mui-pull-right">
				保存
			</button>
			
		</header>
		<div class="mui-content">
			<div class="box" id="divBox">
				<img id="imgp" src="../../images/cbd.jpg" width="320px"/>
			</div>
		</div>
		
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/tools.js"></script>
	<script src="../../js/jq3.js"></script>
	<script src="../../js/cropper.min.js"></script>
	<script src="../../js/fileupload.js"></script>
		
	<script>
	var crop;
	
		var imgSrc = g_jsonData.getData("localpic");	
		document.getElementById("imgp").setAttribute("src",imgSrc);
		
		var img = document.getElementById("imgp");	
		//alert(img);
//		img.addEventListener("load", function()
//		{
			//alert(imgSrc);
			var screenWidth = $(window).width();  
		  	var screenHeight =  $(window).height();  
			
			var options = {  
		        //minContainerHeight :  screenHeight,  
		        //minContainerWidth : screenWidth,  
		        aspectRatio: 1 / 1,//裁剪框比例 1：1  
		        viewMode : 1,//显示  
		        guides :false,//裁剪框虚线 默认true有  
		        dragMode : "move",  
		        build: function (e) { //加载开始  
		            //可以放你的过渡 效果  
		        },  
		        built: function (e) { //加载完成  
		            //$("#containerDiv").show();  
		            //$("#imgEdit").show();  
		        },  
		        zoom: function (e) {  
		         // console.log(e.type, e.detail.ratio);  
		        },  
		        background : true,// 容器是否显示网格背景  
		        movable : true,//是否能移动图片  
		        cropBoxMovable :false,//是否允许拖动裁剪框  
		        cropBoxResizable :false//是否允许拖动 改变裁剪框大小  
		  	};  
		  	crop = new Cropper(document.getElementById("imgp") , options);
		  	//$("#imgp").cropper(options);
//		});

  	document.getElementById("butSaveCut").addEventListener('tap', function(e) 
	{
		crop.getCroppedCanvas().toBlob(function (blob) 
		{
//			  var formData = new FormData();
//			  formData.append('croppedImage', blob);
//			  $.ajax(g_SrvUrl + "/zdm/commonPictures/h5uploadimg.do", 
//			  {
//				    method: "POST",
//					data: formData,
//					processData: false,
//					contentType: false,
//					success: function () {
//					  	console.log('Upload success');
//					},
//					error: function () {
//			  			console.log('Upload error');
//				    }
//			  });
			  
			postFile(blob,
			g_SrvUrl+"/zdm/commonPictures/gennerUpLoadImg.do",
			function(p_retVal)
			{
				//alert(p_retVal.SmallHttpPath+"^"+p_retVal.FileId);
				var main = plus.webview.getWebviewById(g_jsonData.getData("retUrl"));
				mui.fire(main,'gotmsg',{msg:'retPic',retPic:p_retVal});
				mui.back();
			});
		});
		
	});
		
	</script>
</html>
